<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	//调用window的属性或方法可省略对象名，
	//我们直接调用的属性或方法浏览器默认
	//为是调用window的。
	//1.弹出框
	function f1() {
		alert("你好");
	}
	function f2() {
		var b = confirm("你吃了吗？");
		console.log(b);
	}
	function f3() {
		var v = prompt("你吃的什么？");
		console.log(v);
	}
	//2.周期性定时器
	function f4() {
		//启动周期性定时器，让它每隔1000毫秒
		//调用一次函数，返回的是定时器的ID，
		//用来停止此定时器。
		var n = 5;
		var id = setInterval(function(){
			console.log(n--);
			if(!n) {
				console.log("DUANG");
				//通过定时器的ID来停止它
				clearInterval(id);
			}
		},1000);
		//启动定时器相当于启动了一个线程，
		//当前方法f4相当于主线程，而定时器
		//相当于支线程，二者并发执行不会等待。
		//所以主线程在启动支线程后立刻执行此行。
		console.log("duang");
	}
	//3.一次性定时器
	var id;
	function f5() {
		//启动一次性定时器，让它在3000毫秒之后
		//调用函数，返回定时器的ID。一次性定时器
		//会在执行一次后自动停止，若在未执行前
		//希望手动停止，则需要使用ID。
		id = setTimeout(function(){
			console.log("叮叮叮叮叮");
		},3000);
	}
	function f6(){
		//若定时器已经执行完成，则停止无效。
		//若定时器未执行，则提前将其停止。
		clearTimeout(id);
	}
</script>
</head>
<body>
	<p>
		<input type="button" value="按钮1"
			onclick="f1();"/>
		<input type="button" value="按钮2"
			onclick="f2();"/>
		<input type="button" value="按钮3"
			onclick="f3();"/>
	</p>
	<p>
		<input type="button" value="倒数"
			onclick="f4();"/>
		<input type="button" value="打铃"
			onclick="f5();"/>
		<input type="button" value="取消"
			onclick="f6();"/>
	</p>
</body>
</html>








